<%--
  Created by IntelliJ IDEA.
  User: 20275
  Date: 2023/11/18
  Time: 16:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@include file="/pages/common/head.jsp"%>
<script>
    function previewAvatar() {
        var fileInput = document.getElementById('avatarInput');
        var avatarImg = document.getElementById('avatarImg');

        // 获取选中的文件
        var file = fileInput.files[0];

        // 创建 FileReader 对象
        var reader = new FileReader();

        // 设置文件加载完成后的回调函数
        reader.onload = function(e) {
            // 在头像图片中显示图像
            avatarImg.src = e.target.result;
        };

        // 读取文件内容
        reader.readAsDataURL(file);
    }

    function openFileInput() {
        var fileInput = document.getElementById('avatarInput');
        fileInput.click();
    }
</script>
<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">添加学生信息</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    学生管理 >> 添加学生信息
                </div>
                <div class="panel-body">
                    <form role="form" action="${pageContext.request.contextPath }/studentManage/add" method="post"
                          onsubmit="return validateForm()" enctype="multipart/form-data">

                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <!-- 头像区域和上传按钮 -->
                                    <div class="avatar-wrapper">
                                        <img id="avatarImg" class="avatar"  alt="头像">
                                        <a class="upload-btn" onclick="openFileInput()">上传头像</a>
                                    </div>
                                    <!-- 文件选择框 -->
                                    <input id="avatarInput" type="file" class="hidden" onchange="previewAvatar()" name="imageFile"  accept="image/*">
                                </div>
                                <div class="form-group">
                                    <label>学号</label>
                                    <input class="form-control" name="studentNumber" required>
                                </div>
                                <div class="form-group">
                                    <label>姓名</label>
                                    <input class="form-control" name="studentName" required>
                                </div>
                                <div class="form-group">
                                    <label>性别</label>
                                    <select class="form-control" name="studentGender" required>
                                        <option value="1">男</option>
                                        <option value="0">女</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>名族</label>
                                    <input class="form-control" name="studentFamilial" required>
                                </div>
                                <div class="form-group">
                                    <label>身份证</label>
                                    <input class="form-control" name="studentIdCard" required>
                                </div>


                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>年龄</label>
                                    <input class="form-control" name="studentAge" required>
                                </div>
                                <div class="form-group">
                                    <label>所属学院</label>
                                    <select class="form-control" id="college_select" name="studentCollegeId" required>
                                        <option value="0">----请选择学院！----</option>
                                        <c:forEach items="${collegeInfos}" var="info">
                                            <option value="${info.collegeId}">${info.collegeName}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>专业</label>
                                    <select class="form-control" id="speciality_select" name="studentSpecialityId" required>
                                        <option value="0">----请选择学院！----</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>所属专业班级</label>
                                    <select class="form-control" id="class_select" name="studentClassId" required>
                                        <option value="0">----请选择专业！----</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>所住宿舍</label>
                                    <select class="form-control" id="chamber_select" name="studentChamberId" required>
                                        <option value="0">----请选择寝室！----</option>
                                        <c:forEach items="${chamberInfos}" var="info">
                                            <option value="${info.chamberId}">${info.chamberHotelNumber}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>入住日期</label>
                                    <input class="form-control" type="date" name="studentTime" required>
                                </div>
                                <input type="submit" class="btn btn-primary" value="添加">
                                <input type="reset" class="btn btn-warning" value="重置">
                            </div>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

<c:if test="${message != null}">
    <script>
        alert("${message}")
    </script>
    <% session.removeAttribute("message"); %>
</c:if>
<script>
    function validateForm(){
        if ($('#college_select').val() == 0 ||
            $('#speciality_select').val() == 0 ||
            $('#class_select').val() == 0 ||
            $('#chamber_select').val() == 0){
            alert("信息请填完整")
            return false
        }else
            return true

    }
    $('#college_select').change(function() {
        var selectElement = document.getElementById('speciality_select');
        var value = $(this).val();
        console.log("学院id："+value)
        $.ajax({
            type: 'get',
            url: '${pageContext.request.contextPath }/studentManage/ByCollageIdSpec',
            data: { college_id: value},
            success: function(response) {
                selectElement.innerHTML = '';

                var newOption = document.createElement('option');
                newOption.text = "----请选择专业！----";
                newOption.value = 0;
                selectElement.add(newOption);

                for (let i = 0; i < response.data.length; i++) {
                    newOption = document.createElement('option');
                    newOption.text = response.data[i].specialityName;
                    newOption.value = response.data[i].specialityId;
                    selectElement.add(newOption);
                }
                console.log(response.data)
            },
            error: function(log) {
                // 在请求出错时的处理
                console.log('请求出错:'+log);
            }
        });
    });

    $('#speciality_select').change(function() {
        var selectElement = document.getElementById('class_select');
        var value = $(this).val();
        console.log("专业id："+value)
        $.ajax({
            type: 'get',
            url: '${pageContext.request.contextPath }/studentManage/BySpecIdClass',
            data: { speciality_id: value},
            success: function(response) {
                // 清空原内容
                selectElement.innerHTML = '';

                var newOption = document.createElement('option');
                newOption.text = "----请选择班级！----";
                newOption.value = 0;
                selectElement.add(newOption);

                for (let i = 0; i < response.data.length; i++) {
                    newOption = document.createElement('option');
                    newOption.text = response.data[i].className;
                    newOption.value = response.data[i].classId;
                    selectElement.add(newOption);
                }
            },
            error: function(log) {
                // 在请求出错时的处理
                console.log('请求出错:'+log);
            }
        });
    });
</script>

<%@include file="/pages/common/foot.jsp" %>
